<template>
	<view class="content">
		<view class="card">
			<view class="currency">
				<view class="item" style="left: 0upx;" @click="handleSelectCurrency(1)" >
					<image class="currency-icon" :src="formdata.image"></image>
					<text class="name">{{formdata.coin_name || '--'}}</text>
					<text class="iconfont">&#xe6a2;</text>
				</view>
				<view class="item" style="right: 0upx;" @click="handleSelectCurrency(2)">
					<image class="currency-icon" :src="todata.image"></image>
					<text class="name">{{todata.coin_name || '--'}}</text>
					<text class="iconfont">&#xe6a2;</text>
				</view>
				<view class="transform-btn"><image src="../../static/img/indexImg/icon-turn.png"></image></view>
			</view>
			<view class="transform-num">
				<view class="num">
					<input style="text-align: left;" type="number" placeholder-class="placeholder-class" v-model="inNum" @input="inputLeft" :placeholder="i18n.enterNum" />
				</view>
				<view class="num">
					<input style="text-align: right;" type="number" placeholder-class="placeholder-class" v-model="outNum" @input="inputRight" :placeholder="i18n.rogerThat" />
				</view>
			</view>
			<view class="line">
				<image src="/static/img/exchange/line.png" mode="widthFix"></image>
			</view>
			<view class="other">
				<view class="other-item">
					<text class="des">{{formdata.coin_name || '--'}}{{i18n.balance}}</text>
					<text class="value">{{formdata.money || '--'}}</text>
				</view>
				<view class="other-item">
					<text class="des">{{i18n.rate}}</text>
					<text class="value">1 {{formdata.coin_name || '--'}} = {{todata.ratio}} {{todata.coin_name || '--'}}</text>
				</view>
				<view class="other-item">
					<text class="des">{{i18n.fee}}</text>
					<text class="value">{{formdata.exchange_fee || '--'}} {{formdata.mode == 1 ? formdata.coin_name:'%'}}</text>
				</view>
			</view>
		</view>
		<button class="btn-block" hover-class="btn-hover" style="margin-top: 40upx;" @click="submit">{{i18n.exchange}}</button>
		<u-popup v-model="selectCurrencyModalRef" mode="bottom" border-radius="10">
			<view class="modal-body">
				<scroll-view class="scroll-list" scroll-y="true" scroll-left="120">
					<view class="item" v-for="(item, index) in coinlist" :key="index" @click="toggleCoin(item)">
						<view class="list-left">
							<image :src="item.image" mode="aspectFill" class="btc-icon"></image>
							<view class="list-center">
								<view class="name">{{ item.coin_name }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>
		<!-- <input-pwd ref="inputpwd" @complete="confirm"></input-pwd> -->
		<input-pwd @complete="confirm" ref="inputpwd"></input-pwd>
	</view>
</template>

<script>
import inputPwd from '@/components/vue-pwd/input-pwd2.vue'
import CacheImage from '@/components/CacheImage.vue'
export default {
	components: {
		inputPwd, CacheImage
	},
	data() {
		return {
		   formdata:{},
		   formlist:[],
           todata:{},
		   tolist:[],
		   //转入
		   inNum: '',
		   //收到
		   outNum: '',
		   exchengeType:'1',
		   coinlist:[],
		   selectCurrencyModalRef:false
		};
	},
	created (){
		this.getCoinList()
	},
	computed: {
		i18n() {
			return this.$t('exchange');
		}
		
	},
	onShow() {
		uni.setNavigationBarTitle({
		 title:this.$t('exchange.exchange')
		})
	},
	methods: {
		//左边输入
		inputLeft (e){
            this.outNum = (e.detail.value * this.todata.ratio).toFixed(4)
		},
		inputRight (e){
             this.inNum = (e.detail.value / this.todata.ratio).toFixed(4)
		},
		toFixed (num){
			
		},
		//获取闪兑币种
		getCoinList (){
			this.$get('api/exchange').then(res=>{
				this.formlist = res.data
				this.formdata = this.formlist[0]
				this.tolist = res.data.exchange
				this.todata = this.formlist[0].exchange[0]
			})
		},
		//点开选择币种弹框
		handleSelectCurrency(type){//type==1 fromCoin
		    if(type == 1){
				this.coinlist = this.formlist
			}else{
				this.coinlist = this.formdata.exchange
			}
		    this.exchengeType = type
			this.selectCurrencyModalRef = true
		},
		//切换币种
		toggleCoin (item){
			if(this.exchengeType == 1){ //exchengeType==1 fromCoin
				this.formdata = item
				this.todata = item.exchange[0]
			}else{
				this.todata = item
			}
			this.inNum = ''
			this.outNum = ''
			this.selectCurrencyModalRef = false
		},
		submit (){
			let amount= this.inNum
			let coin_id = this.formdata.coin_id
			let to_coin_id = this.todata.coin_id
			if(!amount){
				this.$toast(this.$t('exchange.exchangeNum'))
			}else if(!coin_id || !to_coin_id){
				this.$toast(this.$t('exchange.loading'))
			}else{
				this.$refs.inputpwd.setDisplay(true)
			}
		},
		confirm (password){
			let amount= this.inNum
			let coin_id = this.formdata.coin_id
			let to_coin_id = this.todata.coin_id
			this.$post('api/exchange/save', {
				amount, coin_id, to_coin_id, password
			}).then(res=>{
				this.inNum = ''
				this.outNum = ''
				this.$toast(res.msg)
			})
			this.$refs.inputpwd.setDisplay(false)
		}
	}
};
</script>

<style scoped lang="less">
.modal-header {
	padding: 20upx 30upx;
	border-bottom: 1upx solid var(--border);
}

.other {
	margin-left: 20upx;
	margin-right: 20upx;
	font-size:28upx;
	margin-top: 30upx;
	.other-item {
		margin-top: 10upx;
	}
	.des {
		color: var(--txt-color);
		width: 150upx;
		display: inline-block;
	}
	.value {
		color:var(--txt-gray-color);
		margin-left: 20upx;
	}
}
.line {
	margin-top: 0upx;
	image {
		width: 100%;
		height: 2px;
	}
}
.transform-num {
	display: flex;
	justify-content: space-between;
	font-size: 28upx;
	margin-top: 60upx;
	margin-left: 20upx;
	margin-right: 20upx;
	text-align: center;
	.num{
		width: 40%;
		padding: 20upx 0;
		border-bottom: 1upx solid var(--theme-color);
	}
}
.transform-btn {
	position: absolute;
	left: 50%;
	bottom: -30upx;
	transform: translate(-50%, 0);
	width: 60upx;
	height: 60upx;
	line-height: 60upx;
	text-align: center;
	border-radius: 50%;
	border: 1px var(--border) solid;
	background-color: #191919;
	image {
		width: 40upx;
		height: 40upx;
		margin-top:6upx;
	}
}
.currency {
	display: flex;
	justify-content: space-between;
	margin-left: 20upx;
	margin-right: 20upx;
	height: 150upx;
	border-bottom: 1upx solid var(--border);
	position: relative;
	.item {
		position: absolute;
		display: flex;
		align-items: center;
		margin-top: 40upx;
		margin-bottom: 40upx;
		width:300upx;
	}
	.name {
		font-size: 32upx;
		margin-left: 20upx;
		margin-right: 20upx;
		font-weight: bold;
	}
	.currency-icon {
		width: 60upx;
		height: 60upx;
	}
}
.card {
	background-color: var(--block-color);
	border-radius: 20upx;
	padding-bottom: 30upx;
}
.notice {
}
page{
	height: 100%;
}
.content {
	padding: 30upx;
	height: 100%;
}
	.scroll-list {
			height: 600upx;
	
			.item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-left: 30upx;
				margin-right: 30upx;
				border-bottom: 1upx solid var(--border);
				height: 120upx;
	
				.select-icon {
					font-size: 24upx;
				}
	
				.list-left {
					display: flex;
					align-items: center;
				}
	
				.list-center {
					margin-left: 30upx;
	
					.name {
						font-size: 28upx;
						font-weight: 400;
					}
					.money {
						font-size: 24upx;
						font-weight: 400;
					}
				}
			}
	}
	.modal-body {

	}
	.btc-icon {
		width: 60upx;
		height: 60upx;
	}
</style>
